<template>
  <div :style="{boxShadow:`0 0 ${tweeningValue}px ${shadowColor} ${isInset?'inset':''}`}">
    <slot></slot>
  </div>
</template>
<script>
  import TWEEN from '@tweenjs/tween.js';

  export default {
    data() {
      return {
        tweeningValue: 10,
        value: 10,
        isBig: false,
      };
    },
    props: {
      interval: {
        default: 5000,
        type: Number,
      },
      isInset: {
        default: false,
        type: Boolean,
      },
      shadowColor: {
        default: '#00D6FF',
        type: String,
      },
      bigSize: {
        default: 50,
        type: Number,
      }, smSize: {
        default: 10,
        type: Number,
      },
    },
    watch: {
      value: function(newValue, oldValue) {
       this.tween(oldValue, newValue);
      },
    },
    mounted: function() {
      this.tweeningValue = this.smSize;
      this.value = this.bigSize;
      setInterval(() => {
        if (this.isBig) {
          this.value = this.smSize;
        } else {
          this.value = this.bigSize;
        }
        this.isBig = !this.isBig;
      }, this.interval);
    },
    methods: {
      tween: function(startValue, endValue) {
        var vm = this;

        new TWEEN.Tween({tweeningValue: startValue}).to({tweeningValue: endValue}, this.interval).
          onUpdate(function(object) {
            vm.tweeningValue = object.tweeningValue.toFixed(0);
          }).
          start();

        function animate(time) {
          TWEEN.update(time);
          requestAnimationFrame(animate);
        }

        requestAnimationFrame(animate);
      },
    },
  };
</script>
<style lang="less" scoped>

</style>
